<template>
  <div class="xtx_header">
    <div class="container">
      <!-- 网站Logo -->
      <router-link to="/" class="xtx_logo">
        <h1>小兔鲜儿</h1>
      </router-link>
      <!-- 主导航 -->
      <app-header-nav :cateList="cateList"></app-header-nav>
      <!-- 搜索框 -->
      <app-header-search></app-header-search>
      <!-- 购物车 -->
      <app-header-cart></app-header-cart>
    </div>
  </div>
</template>

<script>
import AppHeaderCart from './app-header-cart'
import AppHeaderNav from './app-header-nav'
import AppHeaderSearch from './app-header-search'
export default {
  name: 'app-header',
  components: { AppHeaderCart, AppHeaderNav, AppHeaderSearch },
  props: ['cateList']
}
</script>

<style scoped lang='less'>
// 布局样式
.xtx_header {
  background: #ffffff;
  .container {
    display: flex;
    align-items: center;
    position: relative;
  }
  .xtx_logo {
    width: 200px;
    height: 132px;
    text-indent: -999px;
    background-image: url(../assets/images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 20px;
  }
}
</style>
